<template>
	
	<view class="imgslect t-flex wrap" @click="show = true">
		<slot></slot>
	</view>
	
	
	<view class="loading t-flex center round" v-if="status.loading">
		<view class="bg round"></view>
		<view class="content t-flex center round bgf">
			<view class="block"></view>
			<view class="text">正在上传</view>
		</view>
	</view>
	
	
<!-- 	<u-popup mode="bottom" v-model="show" safeAreaInsetBottom >
		
	</u-popup> -->
	<view class="bottom safeArea bgf" v-if="show">
		<view class="pop p30 t-flex">
			<view class="item t-flex colum" @click="chooseImg">
				<image src="../../static/icons/78.png" mode="aspectFit" class="icon"></image>
				<view class="f26 c9 mt20">
					媒体文件
				</view>
			</view>
			<view class="item t-flex colum" @click="chooseFile">
				<image src="../../static/icons/77.png" mode="aspectFit" class="icon"></image>
				<view class="f26 c9 mt20">
					会话文件
				</view>
			</view>
		</view>
	</view>
	
	
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { showToast, upload } from "../../lib/ts/util"
	
	const emit = defineEmits(['update:modelValue'])
	
	let show = ref(false)
	
	
	
	
	let props =  defineProps({
		modelValue:{
			default:[],
			type:Array
		},
		max:{
			type:Number,
			default:9
		}
	})
	
	let model = computed({
		get(){
			return props.modelValue
		},
		set(val){
			emit('update:modelValue',val)
		}
	})
	
	
	
	let status = reactive({
		loading:false,
		timer:null
	})
	
	
	
	//选择图片
	const chooseImg = ()=>{
		show.value = false
		//剩余可选数量
		let residue = props.max - model.value.length
		if(residue){
			// #ifdef MP-WEIXIN
				uni.chooseMedia({
					mediaType:['image'],
					count:residue,
					success(e){
						console.log(e,'?')
						let imgTemplateUrlList  = e.tempFiles.map(item=>item.tempFilePath)
						uploadImg(imgTemplateUrlList.slice(0,residue))
						.then(res=>{
							res = res.map((item,index)=>{
								return {
									url:item,
									name:'临时路径.'+e.tempFiles[index].fileType
								}
							})
							
							model.value = [...model.value,...res]
						})
					}
				})
			
			// #endif
			
			// #ifndef MP-WEIXIN
				uni.chooseImage({
					count:props.max,
					success(e) {
						let imgTemplateUrlList  = e.tempFilePaths
						uploadImg(imgTemplateUrlList.slice(0,residue))
						.then(res=>{
							model.value = [...model.value,...res]
						})
						
					}
				})
			// #endif
		}else{
			showToast(`可上传数量已达最大值：${props.max}`)
		}
	}
	
	//选择文件
	const chooseFile = ()=>{
		show.value = false
		let residue = props.max - model.value.length
		if(residue){
			wx.chooseMessageFile({
					count:residue,
					success(e){
						let imgTemplateUrlList  = e.tempFiles.map(item=>item.path)
						uploadImg(imgTemplateUrlList.slice(0,residue))
						.then(res=>{
							res = res.map((item,index)=>{
								return {
									url:item,
									name:e.tempFiles[index].name
								}
							})
							model.value = [...model.value,...res]
						})
					}
				})
		}else{
			showToast(`可上传数量已达最大值：${props.max}`)
		}
	}
	
	
	const delImg = (index)=>{
		uni.showModal({
			title:'提示',
			content:"确认删除这张图片？",
			success(e) {
				if(e.confirm){
					model.value.splice(index,1)
				}
			}
		})
	}
	
	
	
	//上传图片
	let uploadImg = (arr)=>{
		clearTimeout(status.timer)
		status.timer = setTimeout(()=>{
			status.loading = true
		},1000)		
		return new Promise((resolve,reject)=>{
			let requestGroup = arr.map(item=>{
				return upload(item)
			})
			Promise.all(requestGroup)
			.then(res=>{
				resolve(res.map(item=>item.data.url))
			})
			.catch(err=>{
				showToast(`上传失败,请上传符合要求的文件类型`)
			})
			.finally(()=>{
				clearTimeout(status.timer)
				status.loading = false
			})
		})
	}
	
</script>

<style scoped lang="scss">
	@keyframes rotate {
		to{
			transform: rotate(1turn);
		}
	}
	@keyframes op {
		from{
			opacity: 0;
		}
	}
	@keyframes open {
		from{
			bottom: -100%;
		}
	}
	
	
	.add{
		width: 160rpx;
		height: 160rpx;
		background-color: #fff;
		display: inline-flex;
		margin-bottom: 10rpx;
		border: 2rpx dashed #D5D5D5;
	}
	
	.img{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		display: inline-block;
		position: relative;
		.close{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 5rpx;
			top: 5rpx;
		}
	}
	
	.loading{
		.bg{
			background-image: linear-gradient(1.4deg, rgb(139, 166, 246) 3.5%, rgb(168, 240, 248) 96.6%);
			width: 100%;
			height: 100%;
			position: absolute;
			animation: rotate 1s linear;
			animation-iteration-count:infinite;
		}
		width: 200rpx;
		height: 200rpx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 100;
		animation: op 300ms;
		.content{
			width: 90%;
			height: 90%;
			position: absolute;
			z-index: 2;
			background-color: rgb(139, 166, 246);
			overflow: hidden;
			.block{
				width: 120%;
				height: 100%;
				border-radius: 80rpx;
				animation: rotate 3s linear;
				animation-iteration-count:infinite;
				position: absolute;
				background-color: #fff;
				top: -30%;
			}
			.text{
				color: #666;
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 1em;
				text-align: center;
				margin: auto;
				margin-top: 40%;
			}
		}
	}
	
	.icon{
		width: 50rpx;
		height: 50rpx;
	}
	
	.item{
		margin-right: 60rpx;
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 10076;
		left: 0;
		animation: open 300ms;
	}
	
</style>